<template>
  <div>
    <transition appear appear-active-class="fadeInRouteScale">
      <div class="friendItem">
        <div class="box"></div>
        <div class="contain">
          <!-- <div class="left">
            <p>{{time | formatTime}}</p>
            <img :src="avatar" alt />
            <p>{{realname}}</p>
            
            <div class="option" v-if="prodOptionsgrant">
              <button @click="ReadyDelProd"><i class="iconfont iconshanchu"></i>删除</button>
              <button @click="updateProd"><i class="iconfont iconbianji"></i>修改</button>
            </div>
          </div> -->
          <div class="center">
            <p style="font-size:13px;font-weight:300;color:#666;">{{time | formatTime}}</p>
            <img :src="poster" alt />
            <div class="player" @click="playVideo" @mouseenter="live2dAboutVideo()" v-if="!text">
              <div class="box">
                <div class="start"></div>
              </div>
            </div>
            <div class="write" v-if="text" v-html="text">
              <span>{{text}}</span>
            </div>
            <div class="tip" v-if="text" @click="readWrite" @mouseenter="live2dAboutVideo()">read</div>
            <p style="font-weight:400;">{{title}}</p>
          </div>
          
        </div>
        <div class="box"></div>
      </div>
    </transition>
    <transition appear appear-active-class="fadeInRouteScale">
      <div class="MfriendItem">
        <div class="Mbox"></div>
        <div class="Mcontain">
          <div class="Mtop">
            <img :src="avatar" alt />
            <span class="Mtitle">{{realname}}</span>
            <span class="Mtime">{{time | formatTime}}</span>
          </div>
          <div class="Mvideo">
            <p class="mainTitlt">{{title}}</p>
            <div class="FBox">
              <img :src="poster" alt />
              <div class="write" v-if="text" v-html="text">
              <span>{{text}}</span>
            </div>
            <div class="tip" v-if="text" @click="readWrite" @mouseenter="live2dAboutVideo()">read</div>
            </div>
            <div class="player" @click="playVideo" @mouseenter="live2dAboutVideo()" v-if="!text">
              <div class="box">
                <div class="start"></div>
              </div>
            </div>
            <div class="Moption" v-if="prodOptionsgrant">
              <button @click="ReadyDelProd"><i class="iconfont iconshanchu"></i>删除</button>
              <button @click="updateProd"><i class="iconfont iconbianji"></i>修改</button>
            </div>
          </div>
          <div class="Mbottom">{{introduce}}</div>
        </div>
        <div class="Mbox"></div>
      </div>
    </transition>
  </div>
</template>

<script>
import Bus from "../../bus";
import {updateFriendState} from "../../store.js"
import { formatTime } from "../../formatTime.js";
export default {
  props: [
    "id",
    "prod",
    "username",
    "introduce",
    "way",
    "time",
    "title",
    "text",
    "avatar",
    "poster",
    "realname",
    "render"
  ],
  data() {
    return {
      ifMounted:false
    };
  },
  filters: {
    formatTime(val) {
      return formatTime(parseInt(val));
    },
  },
  mounted() {
    Bus.$on("readyMounted",msg=>{
      this.ifMounted = true
    })
  },
  computed: {
    //是否拥有对视频删除和修改的权限
    prodOptionsgrant(){
      return this.$store.getters.user.status ==="876ea4f21078c7d38e3b0bdc74a" || (this.$store.getters.user.status ==="d630fbb5fd6026ccb4af0eb68d3"&&this.username ===this.$store.getters.user.username)
    },
    currentScreenWidth() {
      console.log(document.body.clientWidth);

      return document.body.clientWidth >= 765;
    },
  },
  methods: {
    ReadyDelProd(){
      this.$emit("ReadyDelProd",this.id)
    },
    updateProd(){      
      this.$emit("openAddVideo")
      updateFriendState.id=this.id
      updateFriendState.text=this.text
      updateFriendState.introduce=this.introduce
      updateFriendState.title=this.title
      updateFriendState.origin="update"
      updateFriendState.render=this.render
      updateFriendState.poster=this.poster
      updateFriendState.way=this.way
      
    },
    live2dAboutVideo() {
      let Way;
      if (this.text) {
        Way = "专栏";
      } else {
        Way = "视频";
      }
      Bus.$emit("live2dAboutVideo", { title: this.title, Way: Way });
    },
    readWrite() {
      console.log(this.text);

      this.$emit("readWrite", { text: this.text, title: this.title });
    },
    playVideo() {
      this.$emit("playVideo", { video: this.prod, poster: this.poster,introduce:this.introduce });
    },
  },
  beforeDestroy() {
    Bus.$off("readyMounted")
  },
};
</script>

<style lang="less" scoped>
@import url("../../css/comment/animate.css");
@import url("../../css/pc/friendItem.less");
@import url("../../css/mobile/MfriendItem.less");

</style>